<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        /* overflow: hidden; */
        margin:0 auto;
        display: flex;
        /* text-align: center; */
    }
    #left{
        width: 30%;
        border-right: 1px solid black;
        height: 109vh;
    }
    #right{
        flex: 1;
        height: 100vh;
    }
    #top{
        height: 80px;
        border-bottom: 1px solid black;
        
    }
    #top input{
        border:none;
        outline: none;
        font-size: 20px;
        line-height: 75px;
        background-size: 25px;   
        }
    .topHover:hover{
        font-weight: bold;
        cursor: pointer;
    }
    #right #bottom  {
        flex: 1;
        display: flex;
    }
    #left2{
        width: 35%;
        border-right: 1px solid black;
        height: 100vh;
        display: inline-block;
    }
    h1{
        display: inline-block;
        /* line-height: 75px; */
    }
    #right2{
        flex: 1; 
        display: inline-block;
    }
    .r2Top{
        width: 90%;
        /* float: right; */
        margin-left: 45px;
        height: 45px;
        border-bottom: 2px solid #D9D7D9;
        /* position: relative; */
    }
    .r2Top p{
        float:right;
    }
    .r2Top p span:hover{
        font-size: 20px;
        color: black;
        font-weight: bold;
        cursor: pointer;
    }
    .r2Body1{
        width: 90%;
        margin-left: 45px;
        height: 80px;
        border-bottom: 2px dotted #D9D7D9;
    }
    .r2Body2{
        width: 90%;
        margin-left: 45px;
    }
    .expend{
        background-color: #f0f0f0;
        padding: 5px 0;
        border-radius: 5px;
    }
    .hidden{
        display: none;
    }
    .message:hover .hidden{
        display: block;
    }
    .message:hover .expend{
        display: none;
    }
</style>
<body>
    <div id="left" style="text-align: center;">
        <div id="top">
            <h1 style="color:#ADACAD">个人中心</h1>
        </div>
        <div id="bottom">
            <img style="margin-top: 30px;" src="/imgs/face.png" alt="">
            <h2>杨凯</h2>
            <p>1245914134@qq.com</p>
            <div style="position: relative;"><!-- 图片 -->
            <img style="width: 30px;height: 25px;" src="/imgs/email.jfif" alt="">
            <span style="position: absolute;bottom: 20px;left: 285px;border: 1px solid red;border-radius: 50px; color:red">20</span>
            <img src="" alt="">
            <img src="" alt="">
            </div>
            <div class="message">
                <p class="expend">展开显示信息 V</p>
                <div class="hidden">
                    <span style="float: left;">您关注的<b>前端大神</b>动态更新了</span><br>
                    <span style="float: right;">感兴趣请点开></span><br>
                    <span style="float: left;"><b>张三</b>给您发了<b>1条</b>留言</span>
                </div>
            </div>
        </div>
    </div>
    <div id="right">
        <div id="top" style="font-size: 20px;line-height: 75px;padding:0px 30px 0px 50px;display: flex;justify-content: space-between;">
            <input type="text" placeholder="请输入">
            <div>
              <span style="width: 200px; line-height: 40px;background-color: #ADACAD;border-radius: 25px;display: inline-block;">
                <span class="topHover" style="text-align: center; width: 110px; height:40px;background-color: blue;border-radius: 25px;display: inline-block;">邮箱</span>
                <span class="topHover">日历</span>
            </span>
            </div>
        </div>
        <div id="bottom">
            <div id="left2" style="font-size: 20px;overflow-y: scroll;">
                <div style="border-bottom: 1px solid black; border-left: 5px solid plum;height: 100px;position: sticky;top: 0px;">
                    <h1 style=" margin-left:30px;font-size: 40px; ">记事本</h1>
                </div>
                <div >
                    <img style="float: left;width:300px;height: 250px;margin-left: 20px;" src="/imgs/diqiu.webp" alt="">
                    <div style="border-bottom: 1px solid black;height: 120px;margin-top: 30px;">
                        我爱地球，地球是我家，环境靠大家！地球日走起!
                    </div>
                    <div style="border-bottom: 1px solid black;height: 110px;">
                        今天记得要抄写课文一百遍今天要抄写课文一百遍
                    </div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">妈妈今天生日,记得订花哟</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">6点带小狗出去散步</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">7.6高考,定个闹钟.记得起床!记得起床!记得起床!重要的事情说三遍!</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">小红今天借了我200块钱,说两周后还给我</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">买礼物,爸爸后头生日</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">1+1=2</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">1+1=2</div>
                    <div style="border-bottom: 1px solid black;height: 60px;padding:20px 0px 0px 20px;">1+1=2</div>
                    <div style="height: 70px;background-color: blue;position: sticky;bottom:0px">
                        <button style="width: 200px;height: 70px; border-radius:25px;float: right;">添加+</button>
                    </div>
                </div>
                
            </div>
            <div id="right2">
                <div class="r2Top">
                   <p><span>收件箱</span>/<span>已发送</span></p> 
                </div>
                <div class="r2Body1">
                    <img src="/imgs/头像2.png" style="float: left;border-radius: 50px;" alt="">
                    <div style="margin:15px 0px 0px 100px;height:68px; ">
                        <p>Emlly</p>
                        <p style="margin-top: 25px;color:#ADACAD;">2022年5月15日星期五 上午10.37</p>
                    </div>
                </div>
                <div class="r2Body2">
                    <h1>学习建议</h1>
                    <h2>推荐一些学习材料</h2>
                    书籍
                    <ul>
                        <li>ddddddddddddddddd dddsadasdascsafsdddsahjdgashkdgahd adga vhjas gda ad asbdh asgkda dddsadasdascsafsdddsahjdgashkdgahd</li>
                        <li>dhouihdnaskjdhalsjkhd a hdjskahdaslkjhkdjas adhasjkdbasjdkahdas dhaskjdanjdba dsadasdasd fasdasdasfgasfdsadsadafasfgasgasfwaeqwsa</li>
                        <li>dhouihdnaskjdhalsjkhd a hdjskahdaslkjhkdjas adhasjkdbasjdkahdas dhaskjdanjdba</li>
                        <li>dhouihdnaskjdhalsjkhd a hdjskahdaslkjhkdjas adhasjkdbasjdkahdas dhaskjdanjdba</li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
    
</body>
</html>